<template>
  <Container class="tyre-list">
    <div slot="header" class="container-header large">
      <Form class="search">
        <Row>
          <i-col span="5">
            <FormItem label="科室">
              <Select v-model="list.form.officeId" clearable filterable @on-change="setDepartment">
                <Option v-for="(item, index) of reportDepart" :key="index" :value="item">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="选择门店">
              <SelectStore v-model="list.form.storeId" @input="onSearchBtnClick" />
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem label="部门">
              <Select v-model="list.form.departmentId" clearable filterable @on-change="setDistribute">
                <Option v-for="(item, index) of list.departments" :key="index" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="兑换礼品">
              <Select v-model="list.form.prizeId" multiple clearable placeholder="请选择礼品">
                <Option v-for="(item,index) in list.prizes" :key="index" :value="item.id">
                  {{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem label="经销商">
              <Select v-model="list.form.distributorId" multiple clearable @on-change="getData">
                <Option v-for="(item, index) of list.distributors" :key="index" :value="item.distributorId">{{ item.distributorName }}</Option>
              </Select>
            </FormItem>
            <FormItem label="收货地址">
              <Input v-model.trim="list.form.receiverInfo" placeholder="请输入收货地址" @on-enter="onSearchBtnClick" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem label="门店类型">
              <Select v-model="list.form.storeType" filterable clearable @on-change="getData">
                <Option v-for="(item, index) of list.storeTypes" :key="index" :value="item.id">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" />
          </i-col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <Button
        slot="extra"
        size="large"
        class="item"
        type="primary"
        @click="onImport">导入快递单号</Button>
      <export-btn 
        :param="exportParam" 
        url='/report/purch_exchange_record/export'
        class="item" 
        slot="extra"></export-btn>
      <TabPane label="1-2月好胎送礼兑换统计" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
          @onSelectionChange="onSelectionChange"
        />
      </TabPane>
    </Tabs>
    <ExpressOrder ref="express" />
    <Import
      ref="import"
      title="导入快递单号"
      template-url="trackingNo.xlsx"
      url="/api/taiyi/report/purch_exchange_record/import"
      @complete="getData"
    />
    <StoreDataItem ref="store" />
  </Container>
</template>
<script>
import homeTable from '~/homeTable'
import SelectStore from '~/SelectStore'
import TyreListData from './list/TyreJanuaryListData'
import ExpressOrder from '@/components/ExpressOrderItem'
import Import from '@/components/Import'
import StoreDataItem from './list/StoreDataItem'
import { clearEmpty } from '@/util'
import { mapGetters } from 'vuex'
export default {
  name: 'product/manage/list',
  components: {
    homeTable,
    SelectStore,
    ExpressOrder,
    Import,
    StoreDataItem
  },
  data () {
    return {
      tab: 'tab1',
      list: TyreListData
    }
  },
  mounted () {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.$store.dispatch('getListDepartmentTree')
    this.getPrize()
    this.getStoreType()
    this.getData()
    this.$bus.$on('onCheckTrack', this.onCheckTrack)
    this.$bus.$on('onCheck', this.onCheckStore)
  },
  destroyed () {
    this.$bus.$off()
  },
  methods: {
    onSearchBtnClick () {
      this.list.currentPage = 1
      this.getData()
    },
    getData () {
      this.list.status = 'loading'
      let param = {
        ...this.exportParam,
        current: this.list.currentPage,
        size: this.list.pageSize
      }
      this.$jsonPost('/report/purch_exchange_record/page', param).then(data => {
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            ...item,
            receiverAddress: item.receiver + item.receiverPhone + item.provinceName + item.cityName + item.areaName + item.address
          }
        })
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    setDepartment (row) {
      if (!row) {
        this.list.form.officeId = {}
        this.list.form.departmentId = null
        this.list.departments = []
        this.list.form.distributorIds = []
        this.list.distributors = []
      } else {
        this.list.departments = row.children
      }
    },
    setDistribute (id) {
      this.list.form.distributorIds = []
      if (id) {
        this.$store.dispatch('getDistributorDepartment', { departId: id }).then(res => {
          this.list.distributors = res
        })
      } else {
        this.list.distributors = []
      }
    },
    getPrize () {
      this.$ajaxGet('/report/purch_exchange_record/prize_list/JAN_FEB_PURCH_ACTIVITY').then(data => {
        this.list.prizes = (data || []).map(item => {
          return {
            id: item.giftId,
            label: item.giftName
          }
        })
      })
    },
    getStoreType () {
      this.$ajaxGet('/report/purch_exchange_record/store_type_map/JAN_FEB_PURCH_ACTIVITY').then(data => {
        this.list.storeTypes = []
        for (let [key, value] of Object.entries(data)) {
          this.list.storeTypes.push({
            id: key,
            label: value
          })
        }
      })
    },
    onCheckTrack (num) {
      this.$refs.express.updateInfo(num)
    },
    onCheckStore (id) {
      this.$refs.store.getInfo(id, 'JAN_FEB_PURCH_ACTIVITY')
    },
    onImport () {
      this.$refs.import.reset()
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        name: 'home/tyreJanuary/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange (pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'home/tyreJanuary/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  computed: {
    ...mapGetters(['reportDepart']),
    exportParam() {
      let param = {
        storeId: this.list.form.storeId,
        officeId: (this.list.form.officeId && Object.keys(this.list.form.officeId).length > 0) ? this.list.form.officeId.id : null,
        departmentId: this.list.form.departmentId,
        distributorIds: this.list.form.distributorIds,
        receiverInfo: this.list.form.receiverInfo,
        prizeIds: this.list.form.prizeId,
        giftType: this.list.form.giftType,
        storeTypeId: this.list.form.storeType
      }
      param = clearEmpty(param)
      return param
    }
  }
}
</script>
